.course-mode-container {
  
  .mode-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      margin   : 16px 0;
      color    : rgb(127, 83, 220);
      font-size: 24px;
      font-weight: bold;
    }
  }
  .mode-main {
    width    : 100%;
    display  : flex;
    flex-wrap: wrap;
    .mode-item {
      cursor          : pointer;
      border-radius   : 3px;
      background-color: #fff;
      margin-bottom   : 20px;
      padding         : 10px;
      width           : 24%;
      position: relative;
      .image-box{
        width: 100%;
        height: auto;
        background-color: rgb(127, 83, 220);
        img {
          width : 100%;
          height: auto;
        }
      }
      
      h3 {
        font-weight: bold;
      }
      p {
        color: #ccc;
        font-size: 12px;
      }
      .item-bottom {
        font-size      : 12px;
        display        : flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0 !important;
      }
      .sort{
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        font-weight: bold;
        color: #fff;
        background: rgba(197, 194, 201, 0.5);
        position: absolute;
        top: 20px;
        right: 20px;
      }
      transition-duration: 0.5s
    }
    .mode-item:not(:nth-child(4n)) {
      margin-right: calc(4% / 3);
    }
    .mode-item:hover{
      box-shadow: 0 0 10px #999;
    }
  }
}